<template>
  <div class="line-warpper">
    <el-dialog :title="pageInfo.dialogTitle" :visible.sync="pageInfo.isShow" :close-on-click-modal="false" width="1200px">
      <el-steps :active="pageInfo.stepActive" align-center>
        <el-step title="裂变商品配置" />
        <el-step title="裂变商品列表" />
        <el-step title="裂变完成" />
      </el-steps>
      <!-- 第一步 -->
      <transition name="" enter-class="slideUp-enter" enter-active-class="slideUp-enter-active" leave-active-class="slideUp-leave-active" leave-to-class="slideUp-leave-to">
        <div v-show="pageInfo.stepActive === 1" class="step-one">
          <!-- 内容 -->
          <div class="step-one-article-con">
            <!-- 提示（不可预测内容，故暂不采用遍历渲染） -->
            <div class="line-tip">
              <p>
                <span class="line-tip-num">①</span>
                <span>爆款裂变功能的使用会消耗积分，裂变1个商品将消耗5个积分</span>
                <span class="score">剩余：3000积分</span>
                <span class="ques">
                  <el-popover
                    placement="right"
                    width="240"
                    trigger="hover"
                  >
                    <span>
                      1、裂变1个商品，消耗5个积分
                      <br>
                      2、点击立即充值
                    </span>
                    <i slot="reference" class="el-icon-question" />
                  </el-popover>
                </span>
              </p>
              <p>
                <span class="line-tip-num">②</span>
                <span>裂变无法保证百分百裂变成功，但都会消耗积分，裂变失败的商品将会放入草稿箱，可以稍作修改然后上架，少数商品可能出现裂变失败并且无法放入草稿箱，敬请谅解。</span>
              </p>
              <p>
                <span class="line-tip-num">③</span>
                <span>裂变的商品AI换图或标题也会消耗对应的积分；若对该功能使用或积分消耗有疑问，可联系客服咨询。</span>
                <span class="ques">
                  <el-popover
                    placement="right"
                    width="240"
                    trigger="hover"
                  >
                    <span>
                      1、裂变商品消耗：5积分/个
                      <br>
                      2、AI换图消耗：1积分/个
                      <br>
                      3、AI换标题消耗：1积分/个
                      <br>
                      4、AIsku 消耗：1积分/个
                      <br>
                      5、智能换图消耗：限时免费
                      <br>
                      6、智能换标题消耗：限时免费
                    </span>
                    <i slot="reference" class="el-icon-question" />
                  </el-popover>
                </span>
              </p>
              <p>
                <span class="line-tip-num">④</span>
                <span>如果需要AI换图、AI换标题、水印等功能，可前往<el-link type="primary" href="https://baidu.com">水熊官方网站</el-link>，可使用所有软件功能。</span>
              </p>
            </div>

            <!-- 商品配置 -->
            <h3 class="set-title">商品配置</h3>
            <el-form label-width="120px" label-position="left">
              <el-form-item label="裂变商品数量：" class="count-p">
                <el-input v-model="shopLine.count" placeholder="请输入内容" style="width: 72px;" />
                <div class="count-ul">
                  <div
                    v-for="item in shopLine.countSelectArr"
                    :key="item.value"
                    :class="[item.active ? 'active' : '']"
                    class="count-li"
                    @click="handleCountSelect(item)"
                  >
                    {{ item.label }}
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="第一张主图：" class="count-p">
                <el-radio-group v-model="shopLine.mainImg" @change="mainImgChange">
                  <el-radio v-for="item in shopLine.mainImgArr" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
                <div style="display: flex; align-items: center; margin-left: -14px;">
                  <el-button size="small" type="primary" plain @click="isMainImgDialog = true">本地上传</el-button>
                  <div style="margin-left: 8px;">已选{{ shopLine.mainImgFileList.length }}个</div>
                  <span class="font-blue" style="margin-left: 12px;" @click="isMainImgDialog = true">查看</span>
                </div>
                <el-dialog title="本地上传" :visible.sync="isMainImgDialog" append-to-body>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :on-success="handleSuccess"
                    :file-list="shopLine.mainImgFileList"
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="text"
                  />
                </el-dialog>
              </el-form-item>
              <el-form-item label="图片水印：">
                <el-radio-group v-model="shopLine.waterMark">
                  <el-radio v-for="item in shopLine.waterMarkArr" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
                <el-input v-model="shopLine.waterMarkText" placeholder="请输入水印文本" style="width: 412px;" />
              </el-form-item>
              <el-form-item label="裂变标题设置：" class="count-p">
                <el-radio-group v-model="shopLine.titleSet">
                  <el-radio v-for="item in shopLine.titleSetArr" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
                <!-- ！！！！！除了AI搜标题外，本地上传 是直接复制的【第一张主图】处，后续有真实api记得改 -->
                <div style="display: flex; align-items: center; margin-left: -10px;">
                  <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!【待确认】Ai搜的逻辑是什么? -->
                  <el-button size="small" type="primary" plain>AI搜标题</el-button>
                  <el-button size="small" type="primary" plain @click="isMainImgDialog = true">本地上传</el-button>
                  <div style="margin-left: 8px;">已选{{ shopLine.mainImgFileList.length }}个</div>
                  <span class="font-blue" style="margin-left: 12px;" @click="isMainImgDialog = true">查看</span>
                </div>
                <el-dialog title="本地上传" :visible.sync="isMainImgDialog" append-to-body>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :on-success="handleSuccess"
                    :file-list="shopLine.mainImgFileList"
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="text"
                  />
                </el-dialog>
              </el-form-item>
              <el-form-item label="SKU设置：">
                <el-radio-group v-model="shopLine.sku">
                  <el-radio v-for="item in shopLine.skuArr" :key="item.value" :label="item.value">
                    {{ item.label }}
                    <el-select v-if="item.value === 1" v-model="shopLine.skuColor" multiple placeholder="请选择分类" style="width: 260px; margin-right: 40px;">
                      <el-option
                        v-for="skuColorItem in shopLine.skuColorArr"
                        :key="skuColorItem.value"
                        :label="skuColorItem.label"
                        :value="skuColorItem.value"
                      />
                    </el-select>
                    <el-select v-if="item.value === 2" v-model="shopLine.skuAddType" placeholder="请选择增加方式" style="width: 88px; margin-right: 8px;">
                      <el-option
                        v-for="skuAddItem in shopLine.skuAddArr"
                        :key="skuAddItem.value"
                        :label="skuAddItem.label"
                        :value="skuAddItem.value"
                      />
                    </el-select>
                    <el-input v-if="item.value === 2" v-model="shopLine.skuAddText" placeholder="请输入增加内容" style="width: 310px;" />
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商品发布模式：">
                <el-radio-group v-model="shopLine.shopPublic">
                  <el-radio v-for="item in shopLine.shopPublicArr" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>

            <!-- 商品信息 -->
            <h3 class="set-title">商品信息</h3>
            <div v-if="shopChangeLine" class="shopinfo-row">
              <div class="shopinfo-left">
                <img src="https://picsum.photos/80/80/?1" alt="商品缩略图" class="img-public-style">
              </div>
              <div class="shopinfo-right">
                <h4>{{ shopChangeLine.shopTitle }}</h4>
                <p>ID：<span style="color: #4E78EF;">{{ shopChangeLine.shopId }}</span></p>
                <p>价格：{{ shopChangeLine.price }}</p>
                <p>类目：xxx</p>
              </div>
            </div>
          </div>
          <!-- 底部操作栏 -->
          <div>
            <div style="height: 20px; background-color: #f7f8fa;" />
            <div class="footer-handle">
              <el-button @click="pageInfo.isShow = false">关闭</el-button>
              <el-button type="primary" style="margin-left: 12px;" @click="stepOneClick">开始裂变</el-button>
            </div>
          </div>
        </div>
      </transition>

      <!-- 第二步 -->
      <transition name="" enter-class="slideUp-enter" enter-active-class="slideUp-enter-active" leave-active-class="slideUp-leave-active" leave-to-class="slideUp-leave-to">
        <div v-show="pageInfo.stepActive === 2" class="step-two">
          <!-- 内容 -->
          <div class="step-two-article-con">
            <div class="btn-handle">
              <div class="btn-handle-left" />
              <div class="btn-handle-right">
                <el-button type="primary">批量智能换图</el-button>
                <el-button type="primary" style="margin-left: 12px;">批量AI换标题</el-button>
              </div>
            </div>
            <el-tabs>
              <el-tab-pane label="商品原信息">
                <div v-if="shopChangeLine" class="shopinfo-row">
                  <div class="shopinfo-left">
                    <img src="https://picsum.photos/80/80/?1" alt="商品缩略图" class="img-public-style">
                  </div>
                  <div class="shopinfo-right">
                    <h4>{{ shopChangeLine.shopTitle }}</h4>
                    <p>ID：<span style="color: #4E78EF;">{{ shopChangeLine.shopId }}</span></p>
                    <p>价格：{{ shopChangeLine.price }}</p>
                    <p>类目：xxx</p>
                  </div>
                </div>
                <div class="shopbase-row">
                  <el-tabs>
                    <el-tab-pane label="基础信息">
                      <div style="display: flex; align-items: center;">
                        <span style="color: #333;">商品标题：</span>
                        <el-input
                          v-model="shopLineTwo.shopTitle"
                          type="text"
                          placeholder="请输入商品标题"
                          maxlength="60"
                          show-word-limit
                          style="width: 590px;"
                        />
                        <el-button type="primary" plain style="margin-left: 12px;" @click="shopLineTwo.shopTitle = ''">重置</el-button>
                        <el-button type="primary" style="margin-left: 8px;">AI换标题</el-button>
                        <el-button type="primary" style="margin-left: 8px;">智能换标题</el-button>
                      </div>
                      <div style="display: flex; align-items: center;">
                        <span style="color: #333;">商品主图：</span>
                        <div v-for="(item, index) in shopLineTwo.mainImgList" :key="index">
                          img
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="SKU信息" />
                  </el-tabs>
                </div>
              </el-tab-pane>
              <el-tab-pane label="SKU原信息" />
            </el-tabs>
          </div>
          <!-- 底部操作栏 -->
          <div>
            <div style="height: 20px; background-color: #f7f8fa;" />
            <div class="footer-handle">
              <el-button @click="stepTwoGoBackClick">上一步</el-button>
              <el-button type="primary" style="margin-left: 12px;" @click="stepTwoClick">下一步</el-button>
            </div>
          </div>
        </div>
      </transition>

      <!-- 第三步 -->
      <div v-show="pageInfo.stepActive === 3" class="step-three">
        <!-- 内容 -->
        <div class="step-three-article-con">
          <img src="../../../assets/rxf_tem_images/fission_success.png" alt="裂变完成图片" class="img-public-style">
          <p>成功裂变3个商品</p>
        </div>
        <!-- 底部操作栏 -->
        <div>
          <div style="height: 20px; background-color: #f7f8fa;" />
          <div class="footer-handle">
            <el-button @click="pageInfo.isShow = false">关闭</el-button>
            <el-button type="primary" style="margin-left: 12px;" @click="stepThreeClick">裂变记录</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { startFission } from '@/api/shop-change'
export default {
  props: {
    shopChangeLine: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      pageInfo: {
        isShow: false,
        dialogTitle: '商品裂变',
        stepActive: 1
      },
      shopLine: {
        // ---裂变商品数量 + 首张主图裂变 + 水印类型---
        count: 0,
        countSelectArr: [
          {
            label: '5个',
            value: 5,
            active: false
          },
          {
            label: '10个',
            value: 10,
            active: false
          },
          {
            label: '20个',
            value: 20,
            active: false
          }
        ],
        // 首张主图裂变类型，0使用原主图，1智能换图，2AI换图，3自定义
        mainImg: 1,
        mainImgArr: [
          {
            label: '原主图',
            value: 0
          },
          {
            label: '智能换图',
            value: 1
          },
          {
            label: 'AI换图',
            value: 2
          },
          {
            label: '自定义换图',
            value: 3
          }
        ],
        mainImgFileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
        // 水印类型，0不添加，1自定义AI水印
        waterMark: 0,
        waterMarkArr: [
          {
            label: '不添加水印',
            value: 0
          },
          {
            label: '自定义水印',
            value: 1
          }
        ],
        waterMarkText: '',
        // ---标题设置 + sku + 商品发布模式---
        // 标题设置，0原标题，1智能换标题，2AI换标题，3自定义标题
        titleSet: 0,
        titleSetArr: [
          {
            label: '原标题',
            value: 0
          },
          {
            label: '智能换标题',
            value: 1
          },
          {
            label: 'AI换标题',
            value: 2
          },
          {
            label: '自定义换标题',
            value: 3
          }
        ],
        titleSetFileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
        // sku设置类型，0原文字，1AIsku名字，2统一设置
        sku: 0,
        skuArr: [
          {
            label: '原文字',
            value: 0
          },
          {
            label: 'AI SKU',
            value: 1
          },
          {
            label: '统一增加',
            value: 2
          }
        ],
        skuColor: [],
        skuColorArr: [
          {
            label: '红色',
            value: 0
          },
          {
            label: '蓝色',
            value: 1
          },
          {
            label: '黄色',
            value: 2
          }
        ],
        skuAddType: 1,
        skuAddArr: [
          {
            label: '最前面',
            value: 1
          },
          {
            label: '最后面',
            value: 2
          }
        ],
        skuAddText: '',
        // 商品发布模式，0立即 上架，1放入仓库，2放入草稿箱
        shopPublic: 0,
        shopPublicArr: [
          {
            label: '立即上架',
            value: 0
          },
          {
            label: '放入仓库',
            value: 1
          },
          {
            label: '放入草稿箱',
            value: 2
          }
        ]
      },
      shopLineTwo: {
        shopTitle: '',
        mainImgList: [
          {
            name: 'food.jpeg',
            url: 'https://picsum.photos/140/140/?1'
          },
          {
            name: 'food.jpeg',
            url: 'https://picsum.photos/140/140/?2'
          },
          {
            name: 'food.jpeg',
            url: 'https://picsum.photos/140/140/?3'
          }
        ]
      },
      isMainImgDialog: false
    }
  },
  watch: {
    shopChangeLine(val) {
      val ? this.pageInfo.isShow = true : ''
    }
  },
  methods: {
    handleCountSelect(val) {
      this.shopLine.countSelectArr.forEach(item => {
        if (item.value === val.value) {
          item.active = !val.active
          this.shopLine.count = item.active ? item.value : 0
        } else {
          item.active = false
        }
      })
    },
    mainImgChange() {
      console.log(this.shopLine)
    },
    handleSuccess(response, file, mainImgFileList) {
      // 文件上传成功后的处理逻辑
      // 例如，将上传的文件信息添加到文件列表中
      this.shopLine.mainImgFileList.push(file)
    },
    // 裂变第一步
    stepOneClick() {
      // 【裂变第一步】提交逻辑（1、设对象，可确定直接复制，否则默认值(后端所需格式)；2、设逻辑）
      const confParams = {
        // ---裂变商品数量 + 首张主图裂变 + 水印类型---
        fission_count: this.shopLine.count,
        main_img_type: this.shopLine.mainImg,
        main_img_urls: [],
        watermark_type: this.shopLine.waterMark,
        watermark_font_size: 20, // 页面无录入区域
        watermark_text: '',
        // ---标题设置 + sku + 商品发布模式---
        title_type: this.shopLine.titleSet,
        title_settings: [],
        sku_type: this.shopLine.sku,
        sku_parent_spec: [],
        add_sku_text_type: '',
        add_sku_text: '',
        submit_type: this.shopLine.shopPublic
      }
      confParams.main_img_type === 3
        ? confParams.main_img_urls = this.shopLine.mainImgFileList
        : ''
      confParams.watermark_type === 1
        ? confParams.watermark_text = this.shopLine.waterMarkText
        : ''
      confParams.title_type === 3
        ? confParams.title_settings = this.shopLine.titleSetFileList
        : ''
      confParams.sku_type === 1
        ? confParams.sku_parent_spec = this.shopLine.skuColor
        : ''
      if (confParams.sku_type === 2) {
        confParams.add_sku_text_type = this.shopLine.skuAddType
        confParams.add_sku_text = this.shopLine.skuAddText
      }

      // 给后端的参数
      const params = {
        goods_id: this.shopChangeLine.shopTitle,
        fission_config: confParams
      }
      startFission(params).then(res => {
        console.log(res)
      })
      console.log(params)
      // 提交成功则进行第二步
      this.pageInfo.stepActive = 2
    },
    stepTwoGoBackClick() {
      this.pageInfo.stepActive = 1
    },
    stepTwoClick() {
      this.pageInfo.stepActive = 3
    },
    stepThreeClick() {
      this.pageInfo.isShow = false
      this.$emit('stepThreeClick', this.shopChangeLine)
    }
  }
}
</script>

<style lang="scss" scoped>
.font-blue {
  color: #4E78EF;
  cursor: pointer;
}
.img-public-style {
  border-radius: 8px;
}
.ques-icon {
  width: 16px;
  height: 16px;
  color: #999;
  border: 1px solid #999;
  border-radius: 50%;
  text-align: center;
}
// 自定义的上滑动画
.slideUp-enter-active {
  transition: all .5s ease;
}
.slideUp-leave-active {
  transition: all .5s ease;
}
.slideUp-enter, .slideUp-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.line-warpper {
  padding: 0 20px;
  ::v-deep {
    .el-dialog__header {
      padding: 17px 20px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .el-dialog__body {
      padding-bottom: 0;
    }
    .el-form-item {
      margin-bottom: 16px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .el-form-item__label {
        font-size: 14px;
        color: #333;
        font-weight: 400;
      }
      .el-radio {
        min-width: 102px;
        margin-right: 16px;
      }
    }
    .count-p {
      .el-form-item__content {
      display: flex;
      align-items: center;
        .count-ul {
          display: flex;
          margin-left: 12px;
          .count-li {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 12px;
            width: 47px;
            height: 28px;
            color: #4E78EF;
            border-radius: 4px;
            border: 1px solid #4E78EF;
            cursor: pointer;
            &:first-of-type {
              margin-left: 0;
            }
            &.active {
              background-color: #4E78EF;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .shopinfo-row {
    display: flex;
    .shopInfo-left {
      width: 80px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .shopinfo-right {
      margin-left: 12px;
      &>h4 {
        margin: 0;
        line-height: 20px;
      }
      &>p {
        margin: 4px 0 0;
        line-height: 17px;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .step-one {
    .step-one-article-con {
      padding-bottom: 50px;
      .line-tip {
        margin-top: 15px;
        padding: 20px;
        background-color: #f5f7fe;
        &>p {
          display: flex;
          align-items: center;
          margin: 12px 0 0;
          &:first-of-type {
            margin-top: 0;
          }
          .line-tip-num {
            margin-right: 8px;
            color: #4E78EF;
          }
          .score {
            margin-left: 12px;
            color: #4E78EF;
          }
          .ques {
            margin-left: 8px;
            p {
              margin: 0;

            }
          }
        }
      }
      .set-title {
        position: relative;
        margin: 20px 0;
        padding-left: 10px;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto 0;
          width: 2px;
          height: 12px;
          background-color: #4E78EF;
        }
      }
    }
  }
  .step-two {
    .step-two-article-con {
      .btn-handle {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
      }
      .shopbase-row {
        color: #F7F8FA;
      }
    }
  }
  .step-three {
    .step-three-article-con {
      padding: 170px 0 320px;
      text-align: center;
      img {
        width: 100px;
        height: 100px;
      }
      p {
        margin: 20px 0 0;
        font-size: 16px;
        color: #333;
      }
    }
  }
  .footer-handle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 64px;
  }
}
</style>
